<template>
	<div class="badystyle">
		<div>
			<el-button type="primary" @click="addapi">创建群SOP任务</el-button>
			<el-input
				v-model="input2"
				class="w-50 m-2"
				placeholder="请输入要搜索的名称"
				:suffix-icon="Search"
				style="width: 200px; float: right"
			/>
		</div>
		<div class="tablediv">
			<el-table :data="tangList" stripe style="width: 100%; min-height: 600px">
				<el-table-column prop="name" label="名称" />
				<el-table-column prop="create_time" label="创建时间" />
				<!-- <el-table-column prop="group_condition_tag" label="创建人" /> -->
				<el-table-column prop="group_condition_new_end" label="推送规则" >
					<template #default="scope">
						{{scope.row.send_type == 1? '定时推送' :'周期推送'}}
					</template>
				</el-table-column>
				<el-table-column prop="group_type" label="执行群里数" />
				<el-table-column prop="update_time" label="开关" >
					<template #default="scope">
						<el-switch
							v-model="scope.row.status"
							style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
							:active-value="1"
							:inactive-value="0"
							@click="statusdata(scope.row)"
							/>
					</template>
				</el-table-column>
				<el-table-column prop="address" label="操作">
					<template #default="scope">
						<div style="color: #409eff; cursor: pointer">
							<span @click="editsopapi(scope.row)">编辑群聊</span>
							<span style="padding: 0 10px" @click="editapi(scope.row)">修改</span>
							<span @click="details(scope.row)">详情</span>
							<span style="padding-left: 10px" @click="deleteFun(scope.row.id)">删除</span>
						</div>
					</template>
				</el-table-column>
			</el-table>
		</div>
	</div>
	<editsop ref="edit"></editsop>
</template>
<script setup>
import { Calendar, Search } from '@element-plus/icons-vue'
import { ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import editsop from '../../../components/app/groupchat.vue'
import { reqSopGroupList, reqSopGroupLete, reqSopGroupDetail,reqSopgroupopen } from '@/api'
const tangList = ref('')
const tangData = ref('')
const pageList = ref(1)
const sizeList = ref(10)
const editapi=(val)=>{
	router.push({ path: 'addSop',query: {id:val.id} })
}
const autoData = () => {
	reqSopGroupList({
		name: '',
		page: pageList.value,
		size: sizeList.value
	}).then((res) => {
		tangList.value = res.data.item
		tangData.value = res.data.count
	})
}
autoData()
const statusdata = (val)=>{
	reqSopgroupopen({id:val.id,status:val.status==0 ? 0 : 1}).then(res=>{
		ElMessage({
			message: res.msg,
			type: 'success',
		})
		autoData()
	})
}
// 删除按钮
const loading = ref(false)
const deleteFun =  (e) => {
	console.log(e)
	reqSopGroupLete({id:e}).then(res=>{
		ElMessage({
			showClose: true,
			message: '删除成功',
			type: 'success'
		})
		autoData()
	})
	// const res = await reqSopGroupLete({
	// 	id: e
	// })
	// console.log(res)
	// if (res.status == 'success') {
	// 	loading.value = false
	// 	ElMessage({
	// 		showClose: true,
	// 		message: 删除成功,
	// 		type: 'success'
	// 	})
	// 	getfriendWelcomeFun()
	// } else {
	// 	loading.value = false
	// 	ElMessage({
	// 		showClose: true,
	// 		message: 删除失败,
	// 		type: 'error'
	// 	})
	// }
	// autoData()
}
const router = useRouter()
const edit = ref(null)
// const tableData = ref([
// 	{
// 		date: '2016-05-03',
// 		name: 'Tom',
// 		address: 'No. 189, Grove St, Los Angeles'
// 	},
// 	{
// 		date: '2016-05-03',
// 		name: 'Tom',
// 		address: 'No. 189, Grove St, Los Angeles'
// 	}
// ])
const addapi = () => {
	router.push({ path: 'addSop' })
}
const editsopapi = (val) => {
	var data = {
		show: true,
		id: val,
		name: val.name
	}
	edit.value.addapi(data)
}
// 详情按钮
const details = (val) => {
	router.push({ path: 'details',query:{id:val.id} })
}
</script>
<style>
.badystyle {
	margin: 20px;
}
.tablediv {
	background-color: #fff;
	margin-top: 30px;
}
</style>
